<template>
	<view class="upload-content">
		<view class="upload-main">
			<view class="up-title">{{t('user.uploadtake')}}</view>
			<view class="up-title-des">{{t('user.uploadtext')}}</view>
			<view class="up-img img_bg1" @click="upImg('back')">
				<view class="camera-img">
					<image src="/static/imgs/isok_green.png" v-if="stateValue.back" />
					<image src="/static/imgs/carame_blue.png" v-else />
				</view>
				<view class="camera-title">{{t('user.uploadface')}}</view>
			</view>
			<view class="up-img img_bg2" @click="upImg('front')">
				<view class="camera-img">
					<image src="/static/imgs/isok_green.png" v-if="stateValue.front" />
					<image src="/static/imgs/carame_blue.png" v-else />
				</view>
				<view class="camera-title">{{t('user.uploadnational')}}</view>
			</view>
		</view>
		<view class="next-btn">
			<u-button :disabled="state.btnDisable"
				:style='state.btnDisable?"background-color:#9ec0f2":"background-color:#476ffe"' class='btn-style'
				@click="handleNext">{{t('register.next')}}</u-button>
		</view>
		<!-- 弹窗 -->
		<Popup :visible="visible" btnColor="#476ffe" btnText="我知道了">
			<view class="pop-center">
				<view class="success-icon">
					<image src="/static/imgs/isok_green.png" />
				</view>
				<view class="success-title">
					提交成功
				</view>
			</view>
		</Popup>
	</view>
</template>

<script setup>
	import Popup from "@/components/Popup.vue";
	import configUrl from '@/api/config.js'
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from "vue";
	import {
		ucAuth
	} from '@/api/realName/realName.js'
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	uni.setNavigationBarTitle({
				title: t('user.realName')
			});
	const visible = ref(false);
	const state = reactive({});
	let stateValue = ref({})

	const checked = reactive(true);

	function handleNext() {
		// state.btnDisable = true
		console.log(stateValue.value)
		ucAuth(stateValue.value).then(res => {
			if (res.code == 200) {
				visible.value = true
				console.log(visible)
				uni.navigateTo({
					url: 'examine'
				})
			}
		})

	}

	function upImg(type) {
		// 调起相册选择
		uni.chooseImage({
			count: 1,
			sizeType: ['original'],
			success: function(res) {
				let uploadData = {
					type: 2,
					file: res.tempFilePaths[0]
				}
				uni.uploadFile({
					url: configUrl.http_url + '/upload/image',
					filePath: uploadData.file,
					name: 'file',
					formData: {
						type: uploadData.type,
						file: uploadData.file
					},
					header: {
						"Authorization": uni.getStorageSync('token'),

					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data))
						if (type == 'front') {
							stateValue.value.front = JSON.parse(uploadFileRes.data).data.save_path
						} else {
							stateValue.value.back = JSON.parse(uploadFileRes.data).data.save_path
						}
					}
				});
			}
		})

	}
	onMounted(() => {
		let res = getCurrentInstance().attrs
		// #ifdef APP
		stateValue.value = JSON.parse(res.__pageInstance.options.state)
		// #endif
		// #ifdef H5 
		stateValue.value = JSON.parse(res.state)
		// #endif
		console.log(stateValue)
	})
</script>

<style scoped lang="less">
	page {
		background-color: #fff;
	}

	.upload-content {
		margin-top: 16rpx;

	}

	.upload-main {
		padding: 40rpx 32rpx;
	}

	.up-title {
		font-size: 32rpx
	}

	.up-title-des {
		font-size: 24rpx;
		color: #999999
	}

	.up-img {
		margin-top: 40rpx;
		width: 100%;
		height: 408rpx;
		border-radius: 30rpx;
		background-color: #f2f4f7;
		position: relative;

		.camera-img {
			position: absolute;
			top: 148rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 148rpx;
			height: 148rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.camera-title {
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translateX(-50%);
			font-size: 28rpx;
			color: #2073eb;
		}
	}

	.img_bg1 {
		background: url("/static/imgs/people_grey.png");
		background-size: 100% 100%;
	}

	.img_bg2 {
		background: url("/static/imgs/country_grey.png");
		background-size: 100% 100%;
	}

	.next-btn {
		position: fixed;
		bottom: 174rpx;
		left: 56rpx;
		width: calc(100% - 112rpx);

		.btn-style {
			border-radius: 12rpx;
			background-color: #476ffe;
			color: #fff;
		}
	}

	.pop-center {
		font-family: '' !important;

		.success-icon {
			margin: auto;
			margin-top: 54rpx;
			width: 148rpx;
			height: 148rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.success-title {
			margin: 16rpx 0;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			font-weight: normal;
		}
	}
</style>